<template>
  <div class="login">
    <el-form ref="form" :model="form" class="container" :rules="rules">
      <el-form-item>
        <div class="avatar">
          <img src="../assets/avatar.jpg" alt="">
        </div>
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="账户" prefix-icon="myicon myicon-user"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="密码" prefix-icon="myicon myicon-key" type = "password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="login-btn" @click="loginSubmit('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {checkUser} from '@/api';
export default {

  data () {
    return {
      form:{
        username:'',
        password:'',
      },
      rules:{
        username:[
           { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password:[
           { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      }
    }
  },

  methods: {
    loginSubmit(formName){
      this.$refs[formName].validate(valide => {
        if(valide){
         checkUser(this.form).then(res => {
          if(res.meta.status === 200){
            // 登陆成功之后,要跳转到个人中心，同时还要保存登陆状态，这里采用的
            // 是token，登陆成功之后，后台的一些算法会生成一段token字符串返回到
            // 客户端，这时候再在客户端保存该token值就行
            // 那么为什么要保存登陆状态呢，因为http是无状态的，当第一次登陆之后，
            // 下一次再登陆，服务器端不知道你是否登陆过，所以就需要解决这个问题,有三种方法：
            // 1.利用cookie,在第一次登陆成功的时候，服务器会在他的响应头中setcookie加一段字段
            // 客户端拿到这个字段之后就会保存到cookie中，等下次再次登陆的时候，就会带上这个字段
            // 服务器端就会判断这个字段是否有效
            // 2.利用session，他在第一次登陆成功之后，服务器端会生成一段字段，但是只返回一个ID，等下次再次
            // 访问服务器段的时候，带上这个id，服务器会根据此id对比字段信息，ok就返回你需要的数据
            // 3.利用token,首次登陆成功后，服务器端会根据算法生成一段token的特定字符串，该字符串并不是一段实际的
            // 信息，只是一段算法。将该token存到locationStorng中，下次访问时带上该值即可

            // axios拦截器：那么，既然token存在loaction中了，那如何在下次请求的时候可以带上该值呢，这时候就
            // 需要用到axios拦截器，在发请求之前，它会先拦截此次请求，它会将此次请求处理一下再去发送
            // 那么在这个拦截器里面，我们就可以将token拿出来，放到一个key中，这个key是前后台约定好的key，它会作为
            // 一个请求头放到此次请求中，所以之后的每次请求都能拿到token

            // 拦截器有两种，一种可以拦截请求的，另一种可以拦截响应的:https://github.com/axios/axios

            
            // 登陆成功的时候将token保存到localStorage中，同时也需要将username保存到vuex的state中,那么当该username保存到了
            // vuex的state中，那么在其他组件中也能访问到这个值
            localStorage.setItem("mytoken",res.data.token)
            // commit()有两个参数，第一个为vuex中的mutations中的方法名，第二个参数为方法的参数
            this.$store.commit('setUsername',res.data.username);
            this.$router.push('/')
          }else{
            this.$message({
              type:'error',
              message:res.meta.msg
            })
          }
         })
        }else{
          console.log('校验不通过')
        }
      })
    }
  },

  created () {
  }
}
</script>

<style lang='scss' scoped>
  .login {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #2f4050;

  .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 0px 40px 15px 40px;
    margin: 200px auto;
    background: white;
    .avatar {
      position: relative;
      left: 50%;
      width: 120px;
      height: 120px;
      margin-left: -60px;
      margin-top: -60px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 10px solid #fff;
      box-shadow: 0 1px 5px #ccc;
      overflow: hidden;
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>
